<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ol,
      ul,
      li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      li {
        border: 1px solid black;
      }
      .container {
        width: 1000px;
        margin: 0 auto;
      }
      .nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-630px, -50%);
      }
      .nav li {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
      .cur{
        color: aliceblue;
        font-size: 22px;
        font-family: 700;
      }
    </style>
  </head>
  <body>
    <ol class="nav">
      <li>男装</li>
      <li>女装</li>
      <li>童装</li>
      <li>运动</li>
      <li>美妆</li>
    </ol>
    <ul class="container">
      <li>男装</li>
      <li>女装</li>
      <li>童装</li>
      <li>运动</li>
      <li>美妆</li>
    </ul>
    <script>
      $(function () {
        let colors = ["pink", "purple", "red", "green", "yellow"];
        let heights = [200, 390, 800, 1200, 600];
        $(".nav li").each(function (i, el) {
          $(this).css("background", colors[i]);
        });
        $(".container li").each(function (i, el) {
          $(this).css("height", heights[i]).css("background", colors[i]);
        });


        let isClick=false;
        $(".nav li").click(function () {
            isClick=true;
          let index = $(this).index();
          let li_top = $(".container li").eq(index).offset().top;
          $("html, body").stop(true).animate({
            scrollTop: li_top,
          },1000);

       $(this).addClass("cur").siblings().removeClass("cur");

        });



        let nv_zhuangTop=$("ul li:eq(1)").offset().top;
         console.log( nv_zhuangTop);

         $(window).scroll(function () {
        var scrollPosition = $(this).scrollTop(); // 获取滚动条的位置
        // console.log("滚动条位置: " + scrollPosition);
        if (scrollPosition >= nv_zhuangTop) {
          $(".nav").fadeIn();
          $(".nav").css("position", "fixed");
        } else {
          $(".nav").fadeOut();
          $(".nav").css("position", "absolute");
        }
      });
     $(window).scroll(function () {
        if(isClick){
            return false;
        }
        var scrollPosition = $(this).scrollTop(); // 获取滚动条的位置
       
       $(".container li").each(function(i,el){
               if(scrollPosition>=$(this).offset().top){
                   $(".nav li").eq(i).addClass("cur").siblings().removeClass("cur");
               }
       })
        
      });




      });
    </script>
  </body>
</html>
